<template>
	<view>
		<view style="width: 100%;height: 430rpx;">
			
		</view>
		<view class="houe_flex">
			<view class="gc_flex">
				<view class="gc_flexs">
					<view class="yuans"></view>
					<view class="gc_name">
						高层
					</view>
					<image src="https://star.googom.cn/chuangge/xials.png" mode="" class="xials"></image>
				</view>
				<view class="gc_shuju">
					<view class="shuju_flsdx">
						<view class="shuju_flsdx_name">
							总套数
						</view>
						<view class="shuju_flsdx_shuzi">
							270
						</view>
					</view>
					<view class="shuju_flsdx" style="margin-top: 12rpx;">
						<view class="shuju_flsdx_name">
							已售
						</view>
						<view class="shuju_flsdx_shuzi">
							0
						</view>
					</view>
					<view class="shuju_flsdx" style="margin-top: 12rpx;">
						<view class="shuju_flsdx_name">
							未售
						</view>
						<view class="shuju_flsdx_shuzi">
							0
						</view>
					</view>
				</view>
			</view>
			<view class="gc_flex" style="background-color: rgba(252, 96, 168, 0.1);">
				<view class="gc_flexs">
					<view class="yuans" style="background-color: #DC8FB1;"></view>
					<view class="gc_name">
						洋房
					</view>
					<image src="https://star.googom.cn/chuangge/xials.png" mode="" class="xials"></image>
				</view>
				<view class="gc_shuju">
					<view class="shuju_flsdx">
						<view class="shuju_flsdx_name">
							总套数
						</view>
						<view class="shuju_flsdx_shuzi">
							270
						</view>
					</view>
					<view class="shuju_flsdx" style="margin-top: 12rpx;">
						<view class="shuju_flsdx_name">
							已售
						</view>
						<view class="shuju_flsdx_shuzi">
							0
						</view>
					</view>
					<view class="shuju_flsdx" style="margin-top: 12rpx;">
						<view class="shuju_flsdx_name">
							未售
						</view>
						<view class="shuju_flsdx_shuzi">
							0
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="houe_flex" style="margin-top: 22rpx;">
			<view class="gc_flex" style="background-color: rgba(67, 210, 235, 0.1);">
				<view class="gc_flexs">
					<view class="yuans" style="background-color: #43D2EB;"></view>
					<view class="gc_name">
						叠墅
					</view>
					<image src="https://star.googom.cn/chuangge/xials.png" mode="" class="xials"></image>
				</view>
				<view class="gc_shuju">
					<view class="shuju_flsdx">
						<view class="shuju_flsdx_name">
							总套数
						</view>
						<view class="shuju_flsdx_shuzi">
							270
						</view>
					</view>
					<view class="shuju_flsdx" style="margin-top: 12rpx;">
						<view class="shuju_flsdx_name">
							已售
						</view>
						<view class="shuju_flsdx_shuzi">
							0
						</view>
					</view>
					<view class="shuju_flsdx" style="margin-top: 12rpx;">
						<view class="shuju_flsdx_name">
							未售
						</view>
						<view class="shuju_flsdx_shuzi">
							0
						</view>
					</view>
				</view>
			</view>
			<view class="gc_flex" style="background-color: rgba(5, 207, 103, 0.1);">
				<view class="gc_flexs">
					<view class="yuans" style="background-color: #05CF67;"></view>
					<view class="gc_name">
						联排
					</view>
					<image src="https://star.googom.cn/chuangge/xials.png" mode="" class="xials"></image>
				</view>
				<view class="gc_shuju">
					<view class="shuju_flsdx">
						<view class="shuju_flsdx_name">
							总套数
						</view>
						<view class="shuju_flsdx_shuzi">
							270
						</view>
					</view>
					<view class="shuju_flsdx" style="margin-top: 12rpx;">
						<view class="shuju_flsdx_name">
							已售
						</view>
						<view class="shuju_flsdx_shuzi">
							0
						</view>
					</view>
					<view class="shuju_flsdx" style="margin-top: 12rpx;">
						<view class="shuju_flsdx_name">
							未售
						</view>
						<view class="shuju_flsdx_shuzi">
							0
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="houe_flex" style="margin-top: 22rpx;">
			<view class="gc_flex" style="background-color:rgba(234, 174, 97, 0.1);">
				<view class="gc_flexs">
					<view class="yuans" style="background-color: #EAAE61;"></view>
					<view class="gc_name">
						商墅
					</view>
					<image src="https://star.googom.cn/chuangge/xials.png" mode="" class="xials"></image>
				</view>
				<view class="gc_shuju">
					<view class="shuju_flsdx">
						<view class="shuju_flsdx_name">
							总套数
						</view>
						<view class="shuju_flsdx_shuzi">
							270
						</view>
					</view>
					<view class="shuju_flsdx" style="margin-top: 12rpx;">
						<view class="shuju_flsdx_name">
							已售
						</view>
						<view class="shuju_flsdx_shuzi">
							0
						</view>
					</view>
					<view class="shuju_flsdx" style="margin-top: 12rpx;">
						<view class="shuju_flsdx_name">
							未售
						</view>
						<view class="shuju_flsdx_shuzi">
							0
						</view>
					</view>
				</view>
			</view>
			<view class="gc_flex" style="background-color: rgba(148, 121, 100, 0.1);">
				<view class="gc_flexs">
					<view class="yuans" style="background-color: #947964;"></view>
					<view class="gc_name">
						商铺
					</view>
					<image src="https://star.googom.cn/chuangge/xials.png" mode="" class="xials"></image>
				</view>
				<view class="gc_shuju">
					<view class="shuju_flsdx">
						<view class="shuju_flsdx_name">
							总套数
						</view>
						<view class="shuju_flsdx_shuzi">
							270
						</view>
					</view>
					<view class="shuju_flsdx" style="margin-top: 12rpx;">
						<view class="shuju_flsdx_name">
							已售
						</view>
						<view class="shuju_flsdx_shuzi">
							0
						</view>
					</view>
					<view class="shuju_flsdx" style="margin-top: 12rpx;">
						<view class="shuju_flsdx_name">
							未售
						</view>
						<view class="shuju_flsdx_shuzi">
							0
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.houe_flex{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-left: 24rpx;
		padding-right: 24rpx;
		box-sizing: border-box;
		.gc_flex{
			width: 340rpx;
			height: 252rpx;
			border-radius: 20rpx;
			background: rgba(168, 154, 215, 0.1);
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			.gc_flexs{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-top: 20rpx;
				.yuans{
					width: 20rpx;
					height: 20rpx;
					background: #A89AD7;
					box-sizing: border-box;
					border: 2rpx solid #FFFFFF;
					margin-left: 20rpx;
					border-radius: 50%;
				}
				.gc_name{
					font-size: 30rpx;
					font-weight: bold;
					color: #08112C;
					margin-left: 8rpx;
				}
				.xials{
					width: 32rpx;
					height: 32rpx;
					margin-left: 188rpx;  
				}
			}
			.gc_shuju{
				width: 316rpx;
				height: 164rpx;
				border-radius: 12rpx;
				background: #FFFFFF;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-left: 12rpx;
				margin-top: 16rpx;
				.shuju_flsdx{
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					padding-left: 20rpx;
					padding-right: 28rpx;
					box-sizing: border-box;
					.shuju_flsdx_name{
						font-size: 28rpx;
						color: #08112C;
					}
					.shuju_flsdx_shuzi{
						font-size: 28rpx;
						font-weight: bold;
						color: #08112C;
					}
				}
			}
		}
	}
</style>